<template>
	<view class="conent">
		<view class="conent_box">
			<view class="address">
				<u-row v-if="addressList.length>0">
					<u-col span="11">
						<u-text :text="addressList[0].address+' '+addressList[0].detailAddress" size="14" bold
							line-height="20" align="left"></u-text>
						<u-text :text="addressList[0].name+' '+addressList[0].phoneNumber" size="14" bold
							line-height="20" align="left"></u-text>
					</u-col>
					<u-col span="1">
						<u-button text="" icon="arrow-right" color="#fff" @click="getAddress"
							customStyle="border:none;"></u-button>
					</u-col>
				</u-row>
				<u-row v-else>
					<u-col span="6">
						<u-text text="地址列表为空" size="14" bold line-height="20" align="left"></u-text>
					</u-col>
					<u-col span="6">
						<u-button text="立即添加" color="#fff" @click="append"
							customStyle="border:none;background:#ffb057;"></u-button>
					</u-col>
				</u-row>
			</view>
			<view class="order" v-for="(item,index) in items" :key="index">
				<u-row>
					<u-col span="4">
						<u--image :src="item.goodsImage" width="60" height="60" radius="10"></u--image>
					</u-col>
					<u-col span="8">
						<u-row>
							<u-col span="7">
								<u--text :text="item.goodsName+' '+item.specName" align="left" lines="1" lineHeight="30"
									color="#01221D"></u--text>
								<u-number-box v-model="item.quantity" integer @change="numberChange"></u-number-box>
							</u-col>
							<u-col span="5">
								<u-row>
									<u-col span="6">
										<u--text text="单价:" size="12" align="right" color="#999"></u--text>
									</u-col>
									<u-col span="6">
										<u--text :text="item.price" mode="price" size="16" bold align="left"
											color="#FF7643"></u--text>
									</u-col>
								</u-row>
								<u-row>
									<u-col span="6">
										<u--text text="总价:" size="12" align="right" color="#999"></u--text>
									</u-col>
									<u-col span="6">
										<u--text :text="item.price*item.quantity" mode="price" size="16" bold
											align="left" color="#FF7643"></u--text>
									</u-col>
								</u-row>
							</u-col>
						</u-row>
					</u-col>
				</u-row>
			</view>
			<view class="mode">
				<u--text text="支付方式" size="14" lineHeight="30" bold align="left" color="#000"></u--text>
				<u-row v-for="(item,index) in modeList" :key="index">
					<u-col span="7">
						<u-row>
							<u-col span="4">
								<u--image :src="item.imageUrl" width="40" height="40" radius="10"></u--image>
							</u-col>
							<u-col span="8">
								<u--text :text="item.title" size="14" lineHeight="20" bold align="left"
									color="#000"></u--text>
								<u--text :text="item.hint" size="12" lineHeight="20" bold align="left"
									color="#999"></u--text>
							</u-col>
						</u-row>
					</u-col>
					<u-col span="5" customStyle="text-align:center;">
						<u-button text="" :icon="index==payMode?'checkmark-circle-fill':'checkmark-circle'" color="#fff"
							@click="chooseMode(index)" customStyle="border:none;"
							:iconColor="index==payMode?'#07bea4':'#999'"></u-button>
						<!-- <u-icon name=""></u-icon> -->
					</u-col>
				</u-row>
			</view>
		</view>
		<view class="flex">
			<u-button text="结账" @click="payGoods"
				customStyle="border:none;color:#fff;background:#ffb057;border-radius:16rpx;"></u-button>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import router from '@/api/router';
	import {
		pay
	} from "@/api/pages/goods.js"
	import {
		list
	} from "@/api/pages/address.js"
	const items = ref([])
	const priceAll = ref(0)
	onLoad((options) => {
		items.value = JSON.parse(options.items)
		console.log("123--", items.value)
	})
	watch(
		() => items,
		(val) => {
			priceAll.value = 0
			items.value.forEach((item, index) => {
				priceAll.value = priceAll.value + (item.price * 100) * item.quantity
			});
		}, {
			deep: true,
			immediate: true,
		}
	)
	onShow(() => {
		getAddressList({
			pageNo: 1,
			pageSize: 99
		})
	})
	const addressList = ref([])
	const getAddress = () => {
		router.navigateTo({
			url: "/pageD/feature/address"
		})
	}
	const append = () => {
		router.navigateTo({
			url: "/pageD/feature/add"
		})
	}
	const getAddressList = async (form) => {
		const res = await list(form).then()
		addressList.value = res.result.records
	}
	const numberChange = (e) => {
		console.log(e);
	}
	const modeList = ref([{
		imageUrl: 'https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/wxprice.png',
		title: '微信支付',
		hint: '推荐微信用户使用'
	}])
	const payMode = ref(0)
	const chooseMode = (index) => {
		payMode.value = index
	}
	const payGoods = () => {
		const payForm = {
			addressId: addressList.value[0].id,
			items: items.value.map(n => {
				return {
					specId: n.specId,
					specPrice: n.price,
					specQuantity: n.quantity
				}
			})
		}
		payOrder(payForm)
	}
	const payOrder = async (form) => {
		const res = await pay(form).then()
		if (res.code == 200) {
			uni.requestPayment({
				provider: 'wxpay', // 服务提提供商
				appId: res.result.appId,
				timeStamp: JSON.stringify(res.result.timeStamp), // 时间戳
				nonceStr: res.result.nonceStr, // 随机字符串
				package: res.result.prepayId,
				signType: 'SHA256withRSA', // 签名算法
				paySign: res.result.sign, // 签名

				success: function(ess) {
					console.log('支付成功', ess);
					// 业务逻辑。。。
					// router.navigateTo({
					// 	url: '/pageB/order/succeed',
					// })
					router.reLaunch({
						url: '/pageB/order/succeed?payForm=' + JSON.stringify({
							orderId: res.result.orderId,
							priceAll: priceAll.value,
							address: addressList.value[0],
							items: payForm.items
						})
					})
				},
				fail: function(err) {
					console.log('支付失败', err);
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	body {
		background: #f8f8f8;
	}

	.conent {
		padding: 0;

		.conent_box {
			margin: 0;
			padding: 10rpx;

			>view {
				background: #fff;
				padding: 20rpx;
				margin-bottom: 20rpx;
				box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
				border-radius: 20rpx;
			}
		}
	}

	.flex {
		position: fixed;
		bottom: 0;
		width: 90%;
		padding: 20rpx 5%;
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;
	}
</style>